How can I switch between display none and flex using animated values? I tried interpolating to 0 and 1 and depending on the value change the display property.
I am trying to hide the Animated.View when the animated value reaches 90 but nothing is happening.
// change animated value from 0 to 180
const flip = () => {
Animated.timing(flipAnimation, {
toValue: 180,
duration: 300,
useNativeDriver: true,
}).start();
};
//if the animated value is between 0 and 90 it will return 0 else it will return 1
const interpolate = flipAnimation.interpolate({
inputRange: [0, 90, 91, 180],
outputRange: [0, 0, 1, 1],
})
//if the value is 1 set display to "none" else set it to "flex"
<Animated.view style={{
display: interpolate === 1 ? "none" : "flex"
}}/>
This is what ended up working for my needs, I gave up trying to make it work with Animated and just used reanimated:
const hideFrontStyle = useAnimatedStyle(() => {
return {
display: flipAnimation.value >= 90 ? "flex" : "none",
};
});